<template>
  <div class="gi_page user-manage">
    <a-card title="用户管理">
      <a-row justify="space-between">
        <a-space wrap>
          <a-button type="primary" @click="onAdd">
            <template #icon>
              <icon-plus />
            </template>
            <span>新增</span>
          </a-button>
        </a-space>

        <a-space wrap>
          <a-input-group>
            <a-select v-model="form.status" placeholder="用户状态" allow-clear style="width: 150px">
              <a-option :value="1">正常</a-option>
              <a-option :value="0">禁用</a-option>
            </a-select>
            <a-input v-model="form.realName" placeholder="输入用户名搜索" allow-clear style="max-width: 250px">
            </a-input>
          </a-input-group>
          <a-button type="primary" @click="search">
            <template #icon>
              <icon-search />
            </template>
            <span>查询</span>
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            <span>重置</span>
          </a-button>
        </a-space>
      </a-row>

      <a-table
        style="margin-top: 6px"
        row-key="id"
        :loading="loading"
        :data="userList"
        :bordered="{ cell: true }"
        :scroll="{ x: '100%', y: '100%', minWidth: 1700 }"
        :pagination="pagination"
        :row-selection="{ type: 'checkbox', showCheckedAll: true }"
        :selected-keys="selectedKeys"
        @select="select"
        @select-all="selectAll"
      >
        <template #columns>
          <a-table-column title="序号" :width="64">
            <template #cell="cell">{{ cell.rowIndex + 1 }}</template>
          </a-table-column>
          <a-table-column title="用户名" data-index="realName" :width="120">
            <template #cell="{ record }">
              <a-link @click="openDetail(record)">{{ record.realName }}</a-link>
            </template>
          </a-table-column>
          <a-table-column title="状态" :width="100" align="center">
            <template #cell="{ record }">
              <a-tag v-if="record.status === 1" color="green">正常</a-tag>
              <a-tag v-if="record.status === 0" color="red">禁用</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="联系方式" data-index="mobile" :width="180"></a-table-column>
          <a-table-column title="邮箱" data-index="email" :width="180"></a-table-column>
          <a-table-column title="操作" :width="180" align="center" :fixed="!isMobile() ? 'right' : undefined">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" size="mini" @click="onEdit(record)">
                  <template #icon>
                    <icon-edit />
                  </template>
                  <span>编辑</span>
                </a-button>
                <a-popconfirm type="warning" content="确定删除该用户吗?" @before-ok="onDelete(record)">
                  <a-button type="primary" status="danger" size="mini" :disabled="record.disabled">
                    <template #icon>
                      <icon-delete />
                    </template>
                    <span>删除</span>
                  </a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>

    <AddUserModal ref="AddUserModalRef" @save-success="search"></AddUserModal>
    <UserDetailDrawer ref="UserDetailDrawerRef"></UserDetailDrawer>
  </div>
</template>

<script setup lang="ts">
import { useTable } from '@/hooks'
import { getSystemUserList, deleteSystemUser } from '@/apis'
import type { UserItem } from '@/apis'
import AddUserModal from './AddUserModal.vue'
import UserDetailDrawer from './UserDetailDrawer.vue'
import { isMobile } from '@/utils'
import { config } from '@/config'

defineOptions({ name: 'SystemUser' })
const AddUserModalRef = ref<InstanceType<typeof AddUserModal>>()
const UserDetailDrawerRef = ref<InstanceType<typeof UserDetailDrawer>>()

const form = reactive({ status: '', realName: '' })

const FILE_URL = computed(() => config.fileUrl)

const {
  loading,
  tableData: userList,
  pagination,
  selectedKeys,
  search,
  select,
  selectAll,
  handleDelete
} = useTable(
  (pagin) =>
    getSystemUserList({ pageNo: pagin.page, pageSize: pagin.size, status: form.status, realName: form.realName }),
  { immediate: true }
)

const reset = () => {
  form.status = ''
  form.realName = ''
  search()
}

// 删除
const onDelete = (item: UserItem) => {
  return handleDelete(() => deleteSystemUser(item.bizAcctId), { showModal: false })
}
const onAdd = () => {
  AddUserModalRef.value?.add()
}

const onEdit = (item: UserItem) => {
  AddUserModalRef.value?.edit(item.id)
}

const openDetail = (item: UserItem) => {
  UserDetailDrawerRef.value?.open(item.id)
}
</script>

<style lang="scss" scoped></style>
